<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="left" size="18" color="#333"></uni-icons>
      </view>
      <text class="title">比赛详情</text>
      <view class="placeholder"></view>
    </view>
    
    <!-- 比赛基本信息 -->
    <view class="competition-banner">
      <view class="comp-info">
        <text class="comp-name">{{competition.name}}</text>
        <view class="comp-tags">
          <text class="comp-tag" v-if="competition.isOfficial">官方比赛</text>
          <text class="comp-tag" v-if="competition.isOnline">线上比赛</text>
          <text class="comp-tag level">{{competition.level}}</text>
        </view>
        <view class="comp-date">
          <uni-icons type="calendar" size="14" color="#666"></uni-icons>
          <text>{{competition.timeStr}}</text>
        </view>
      </view>
      <view class="match-level">
        <view class="match-stars">
          <uni-icons v-for="i in 5" :key="i" :type="i <= competition.matchLevel ? 'star-filled' : 'star'" size="14" :color="i <= competition.matchLevel ? '#ffcc33' : '#cccccc'"></uni-icons>
        </view>
        <text class="match-text">契合度</text>
      </view>
    </view>
    
    <!-- 比赛详情 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">比赛介绍</text>
      </view>
      <view class="content-block">
        <text class="content-text">{{competition.description}}</text>
      </view>
    </view>
    
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">比赛信息</text>
      </view>
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">举办方</text>
          <text class="info-value">{{competition.organizer}}</text>
        </view>
        <view class="info-item">
          <text class="info-label">比赛时间</text>
          <text class="info-value">{{competition.timeStr}}</text>
        </view>
        <view class="info-item">
          <text class="info-label">比赛形式</text>
          <text class="info-value">{{competition.isOnline ? '线上比赛' : '线下比赛'}}</text>
        </view>
        <view class="info-item">
          <text class="info-label">考试地点</text>
          <text class="info-value">{{competition.location || '待通知'}}</text>
        </view>
        <view class="info-item">
          <text class="info-label">报名费用</text>
          <text class="info-value">{{competition.fee || '免费'}}</text>
        </view>
        <view class="info-item">
          <text class="info-label">报名截止</text>
          <text class="info-value highlight">{{competition.deadline}}</text>
        </view>
      </view>
    </view>
    
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">比赛要求</text>
      </view>
      <view class="requirements-list">
        <view class="requirement-item" v-for="(req, index) in competition.requirements" :key="index">
          <view class="requirement-icon">
            <uni-icons type="checkmarkempty" size="18" color="#2fc25b"></uni-icons>
          </view>
          <text class="requirement-text">{{req}}</text>
        </view>
      </view>
    </view>
    
    <!-- 契合度分析 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">契合度分析</text>
      </view>
      <view class="match-analysis">
        <view class="match-chart">
          <view class="match-score">
            <text class="score-value">{{competition.matchScore}}</text>
            <text class="score-unit">分</text>
          </view>
          <view class="progress-circle" :style="{
            background: `conic-gradient(#1890ff ${competition.matchScore * 3.6}deg, #f0f0f0 0deg)`
          }">
            <view class="progress-inner"></view>
          </view>
        </view>
        <view class="match-desc">
          <text class="match-title">{{getMatchLevelText()}}</text>
          <text class="match-reason">{{competition.matchReason}}</text>
        </view>
      </view>
    </view>
    
    <!-- 知识点掌握情况 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">知识点掌握情况</text>
      </view>
      <view class="knowledge-chart">
        <view class="charts-box">
          <qiun-data-charts 
            type="column" 
            :opts="{
              color:['#1890FF','#91CB74'],
              extra:{column:{type:'group'}}
            }" 
            :chartData="knowledgeChartData"
          />
        </view>
      </view>
      <view class="knowledge-tips">
        <view class="tip-item">
          <view class="tip-icon warning">
            <uni-icons type="info" size="14" color="#ff9500"></uni-icons>
          </view>
          <text class="tip-text">《动态规划》是本次比赛的重要考点，但你的掌握程度仅为60%，建议加强练习。</text>
        </view>
      </view>
    </view>
    
    <!-- 报名按钮 -->
    <view class="action-bar">
      <text class="action-deadline">报名截止: {{competition.deadline}}</text>
      <button class="action-btn signup" @click="signupCompetition">立即报名</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      competition: {
        name: "NOIP 普及组",
        isOfficial: true,
        isOnline: false,
        level: "省级",
        timeStr: "2023年10月15日 09:00-12:00",
        description: "全国青少年信息学奥林匹克联赛普及组是中国计算机学会主办的面向全国青少年的信息学竞赛，旨在向青少年普及计算机科学知识，测试青少年解决问题的能力。参赛对象主要为高中生和初中生，分为普及组和提高组两个组别。",
        organizer: "中国计算机学会",
        location: "各省指定考点",
        fee: "120元",
        deadline: "2023年9月30日",
        matchLevel: 5,
        matchScore: 87,
        matchReason: "根据你的练习记录和模拟赛表现，算法基础扎实，已经掌握了大部分NOIP基础知识点，非常适合参加此比赛。有望取得良好成绩。",
        requirements: [
          "年龄不超过18周岁",
          "具备基础的C++/Pascal/Python编程能力",
          "掌握基础算法和数据结构",
          "提前准备好有效身份证件"
        ]
      },
      knowledgeChartData: {
        categories: ["动态规划", "搜索算法", "贪心算法", "数据结构", "图论"],
        series: [
          {
            name: "你的掌握度",
            data: [60, 80, 75, 85, 70]
          },
          {
            name: "竞赛要求",
            data: [80, 75, 65, 90, 70]
          }
        ]
      },
      isRegistered: false
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    getMatchLevelText() {
      const score = this.competition.matchScore;
      if (score >= 80) return "非常适合";
      if (score >= 60) return "比较适合";
      if (score >= 40) return "适合尝试";
      return "建议加强准备";
    },
    signupCompetition() {
      uni.showModal({
        title: '确认报名',
        content: `是否确认报名参加${this.competition.name}？`,
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '提交中...'
            });
            
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '报名成功',
                icon: 'success',
                duration: 2000
              });
              
              this.isRegistered = true;
            }, 1500);
          }
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.placeholder {
  width: 60rpx;
}

.competition-banner {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.comp-info {
  flex: 1;
}

.comp-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.comp-tags {
  display: flex;
  margin-bottom: 15rpx;
}

.comp-tag {
  font-size: 22rpx;
  color: #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-right: 10rpx;
}

.comp-tag.level {
  color: #ff9500;
  background-color: rgba(255, 149, 0, 0.1);
}

.comp-date {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.comp-date uni-icons {
  margin-right: 6rpx;
}

.match-level {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.match-stars {
  margin-bottom: 6rpx;
}

.match-text {
  font-size: 22rpx;
  color: #666;
}

.section-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.content-block {
  margin-bottom: 10rpx;
}

.content-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.info-list {
  display: flex;
  flex-direction: column;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
}

.info-value.highlight {
  color: #f04864;
  font-weight: bold;
}

.requirements-list {
  display: flex;
  flex-direction: column;
}

.requirement-item {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
}

.requirement-icon {
  margin-right: 10rpx;
}

.requirement-text {
  font-size: 28rpx;
  color: #333;
}

.match-analysis {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
}

.match-chart {
  position: relative;
  margin-right: 30rpx;
}

.progress-circle {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-inner {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background-color: #fff;
}

.match-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  z-index: 1;
}

.score-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.score-unit {
  font-size: 20rpx;
  color: #666;
}

.match-desc {
  flex: 1;
}

.match-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.match-reason {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.charts-box {
  width: 100%;
  height: 400rpx;
}

.knowledge-tips {
  margin-top: 20rpx;
}

.tip-item {
  display: flex;
  background-color: #fff7e6;
  padding: 16rpx;
  border-radius: 8rpx;
  align-items: flex-start;
}

.tip-icon {
  margin-right: 10rpx;
  margin-top: 4rpx;
}

.tip-icon.warning {
  color: #ff9500;
}

.tip-text {
  font-size: 26rpx;
  color: #333;
  flex: 1;
  line-height: 1.5;
}

.action-bar {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-deadline {
  font-size: 24rpx;
  color: #666;
}

.action-btn {
  padding: 14rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.action-btn.signup {
  background-color: #1890ff;
  color: #fff;
}
</style> 